<template>
    <div class="game">
       <h2>标题列表</h2> 
       <slot :games="games" x="哈哈" y="你好"></slot>
       <slot name="qwe" x="哈哈X1112" y="你好Y333"></slot>
    <!--  
    <ul>
        <li v-for="g in games" :key="g.id" >{{ g.name}}</li>
    </ul> 
    -->
    </div>    
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

let games = reactive([
    { id:'10001',name:" game名称1"},
    { id:'10002',name:" game名称2"},
    { id:'10003',name:" game名称3"},
    { id:'10004',name:" game名称4"}
])


</script>
<style scoped>
.game {
    width: 200px;
    height: 300px;
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>